<template>
    <div id="HazardLevelZoning"></div>
  </template>
  <script setup>
  import * as echarts from 'echarts';
  import { onMounted } from 'vue';
  const props = defineProps({
  datas: {
    required: true,
    type: Array,
    default: [],
  },
});
const emit = defineEmits(['levelClickVal']);
const levelVal=ref('')
const { datas } = toRefs(props);
  onMounted(() => {
    watch(
    () => props.datas,
    () => {
    let myChart = echarts.init(document.getElementById('HazardLevelZoning'));
    myChart.setOption({
      tooltip: {
        trigger: 'axis'
      },
      grid: {
          left: "5%",
          right: "12%",
          bottom: "15%",
          containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1级', '2级', '3级', '4级'],
        //x轴文字的配置
        axisLabel: {
          fontSize: 12,
          textStyle: {
            color: ' #fff',
          },
        },
        name:'危险\n等级',
        nameTextStyle:{
          color:'#fff'
        }
      },
  
      yAxis: {
        type: 'value',
        axisLabel: {
          //y轴文字的配置
          textStyle: {
            color: 'rgba(255,255,255,0.5)',
          },
        },
        name:'等级占比/%',
        nameTextStyle:{
          color:'#fff',
        },
        max: 50,
        axisTick:{show:false},
			  axisLine:{show:false},
		      //设置Y轴颜色
			    splitLine:{
				  show:true,
				  lineStyle: { color: ['#475ADB'], type: 'dashed',opacity:0.5 }
			  },
		    axisLabel: {
	        textStyle: {
	          color:'rgba(255,255,255,0.5)',
				    fontSize:'14px',
	        },
	      }
      },
      series: [
        {
          symbol: 'circle', //设定为实心点
          symbolSize: 7, //设定实心点的大小
          color: '#46FFFF', //设定实线点的颜色
          data: datas.value,
          type: 'line',
          lineStyle: {
            color: '#46FFFF',
          },
          areaStyle: {
            //区域填充渐变颜色
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(70,255,255, 0.8)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(70,255,255, 0)', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
    });
    window.onresize = function () {
      // 自适应大小
      myChart.resize();
    };
    myChart.getZr().on('click',function(param){
      console.log(param)
      // levelVal.value=param.name
      emit('levelClickVal', param);
    })
  },{ deep: true})
  });
  </script>
  
  <style lang="scss" scoped>
  #HazardLevelZoning {
    width: 100%;
    height: 240px;
    cursor: pointer;
    margin: -20px 0px 0px 0px;
  }
  </style>
  